<template>
  <div class="container">
    <van-nav-bar
      @click-left="$router.replace('/profile')"
      left-arrow
    >
      <template #title>
        <div class="title_containrt">
          <div
            @click="goFocus"
            class="focus"
          >
            <div :class="active === 0?'active':''">关注</div>
          </div>
          <div
            @click="goFans"
            class="fans"
          >
            <div :class="active === 1?'active':''">粉丝</div>
          </div>
        </div>
      </template>
    </van-nav-bar>
    <focus
      :id="userInfo.id"
      v-if="active === 0"
    />
    <fans
      :id="userInfo.id"
      v-else
    />
  </div>
</template>

<script>
import Focus from "./chi-coms/focus";
import Fans from "./chi-coms/fans";
import { mapState } from "vuex";
export default {
  name: "FFans",
  components: {
    Focus,
    Fans,
  },
  computed: {
    ...mapState(["userInfo"])
  },
  data() {
    return {
      active: parseInt(this.$route.params.type)
    };
  },
  beforeRouteUpdate (to, from, next) {
    // console.log(from)
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goFocus() {
      if (this.active === 1) {
        this.active = 0;
        // this.$router.replace(`/ffans?type=0`);
      }
    },
    goFans() {
      if (this.active === 0) {
        this.active = 1;
        // this.$router.replace(`/ffans?type=1`);
      }
    }
  }
};
</script>

<style scoped lang="stylus" >
.title_containrt
  display flex
  height 46px
  line-height 46px

  .fans
    margin-left 10px

.active
  border-bottom 2px solid #fff
  height 43px

.van-nav-bar
  position fixed
  top 0
  right 0
  left 0
  height 46px

.container
  padding-top 46px
</style>